<template>
  <div class="structuration-plus-main">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">结构化</x-header>
    </div>
    <div class="dy-body">
      <div class="swiper" v-if="imgList.length !== 0">
        <swiper loop auto height="3.7rem" :list="imgList" :index="imgIndex" @on-index-change="onIndexChange" dots-position="center"></swiper>
      </div>
      <div class="navigation-bar">
        <div class="sort" @click="changeShowTop()">
          <div>综合排序</div>
          <div class="graph">
            <div class="top-triangle"></div>
            <div class="top-white-triangle" v-show="showtop"></div>
            <div class="bottom-triangle"></div>
            <div class="bottom-white-triangle" v-show="!showtop"></div>
          </div>
        </div>
        <div class="msg">起购金额</div>
        <div class="msg">收益率</div>
        <div class="screen-img" @click="showFilterClick"><img class="img-url" src="../../../assets/img/Financial/shaixuan.png"></div>

        <popup v-model="showFilter" position="right" width="100%" style="width: 100%; padding:0; z-index: 20000">
          <div class="filter-page">
            <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="unshowFilterClick">筛选</x-header>
            <div class="fliter-option" v-for="(filterList, Findex) in filterLists" :key="Findex">
              <div class="types">{{ filterList.types }}</div>
              <div class="option-list" :class="{checked: optionList.selected === 1}" v-for="(optionList, Oindex) in filterList.optionLists" :key="Oindex" @click="checkedOption(Findex, Oindex, optionList.option, $event)">
                {{ optionList.option }}
              </div>
            </div>
            <div class="button-group">
              <div class="button cancle" @click="clearCheck">清除所选</div>
              <div class="button confirm" @click="sendData">确认</div>
            </div>
          </div>
        </popup>
      </div>
      <div class="prd-list" :style="{ height: imgList.length === 0 ? '93.5%' : '63.5%'}">
        <scroller lock-x use-pullup use-pulldown height="100%" @on-pullup-loading="loadMore" @on-pulldown-loading="refresh" ref="scroller">
          <div>
            <div class="data-box" v-for="(tagLists, index) in prdInfo" :key="index" @click="gotoDetail(index)">
              <div class="left-info">
                <div class="rate">{{ tagLists.rateMin }}~{{ tagLists.rateMax }}</div>
                <div class="rate-msg">{{ tagLists.rateMsg }}</div>
              </div>
              <div class="center-info">
                <div class="prd-name">{{ tagLists.prdName }}</div>
                <div class="tag" v-for="(tag, index) in  tagLists.tagList" :key="index">{{ tag }}</div>
                <div class="tag red" v-if="parseInt(tagLists.soldVol)/parseInt(tagLists.totalVol) >= 0.9">额度紧张</div>
              </div>
              <div class="right-icon">
                <img class="icon-img" src="../../../assets/img/Financial/zunxiang.png" v-if="tagLists.icon === '1'">
              </div>
            </div>
          </div>
        </scroller>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showFilter: false,
      showtop: true,
      imgIndex: 0,
      checkedList: [],
      checkedOptions: [],
      filterLists: [],
      items: [{
        types: '币种',
        optionLists: [{
          option: '人民币',
          selected: 0
        }, {
          option: '美元',
          selected: 0
        }, {
          option: '港币',
          selected: 0
        }, {
          option: '欧元',
          selected: 0
        }]
      }, {
        types: '收益率区间',
        optionLists: [{
          option: '低于4%',
          selected: 0
        }, {
          option: '4%~5%',
          selected: 0
        }, {
          option: '5%以上',
          selected: 0
        }]
      }],
      imgList: [{
        url: 'javascript:',
        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
        fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
      }, {
        url: 'javascript:',
        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg',
        fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
      }, {
        url: 'javascript:',
        img: 'https://static.vux.li/demo/5.jpg', // 404
        fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
      }],
      // imgList: [],
      prdInfo: [{
        rateMin: '4.01%',
        rateMax: '24.01%',
        rateMsg: '七日年化',
        prdName: '沪深300指数看涨',
        tagList: ['112天', '5元起购'],
        totalVol: '100000',
        soldVol: '91000',
        icon: '0'
      }, {
        rateMin: '4.01%',
        rateMax: '24.01%',
        rateMsg: '七日年化',
        prdName: '中证500指数看涨',
        tagList: ['112天', '5元起购'],
        totalVol: '100000',
        soldVol: '1000',
        icon: '1'
      }, {
        rateMin: '4.01%',
        rateMax: '24.01%',
        rateMsg: '七日年化',
        prdName: '原油期货向上触碰',
        tagList: ['112天', '5元起购'],
        totalVol: '100000',
        soldVol: '81000',
        icon: '1'
      }, {
        rateMin: '4.01%',
        rateMax: '24.01%',
        rateMsg: '七日年化',
        prdName: '中证500指数看涨',
        tagList: ['112天', '5元起购'],
        totalVol: '100000',
        soldVol: '92000',
        icon: '0'
      }, {
        rateMin: '4.01%',
        rateMax: '24.01%',
        rateMsg: '七日年化',
        prdName: '中证500指数看涨',
        tagList: ['112天', '5元起购'],
        totalVol: '100000',
        soldVol: '90000',
        icon: '0'
      }, {
        rateMin: '4.01%',
        rateMax: '24.01%',
        rateMsg: '七日年化',
        prdName: '中证500指数看涨',
        tagList: ['112天', '5元起购'],
        totalVol: '100000',
        soldVol: '90000',
        icon: '1'
      }, {
        rateMin: '4.01%',
        rateMax: '24.01%',
        rateMsg: '七日年化',
        prdName: '中证500指数看涨',
        tagList: ['112天', '5元起购'],
        totalVol: '100000',
        soldVol: '90000',
        icon: '1'
      }, {
        rateMin: '4.01%',
        rateMax: '24.01%',
        rateMsg: '七日年化',
        prdName: '中证500指数看涨',
        tagList: ['112天', '5元起购'],
        totalVol: '100000',
        soldVol: '90000',
        icon: '1'
      }, {
        rateMin: '4.01%',
        rateMax: '24.01%',
        rateMsg: '七日年化',
        prdName: '中证500指数看涨',
        tagList: ['112天', '5元起购'],
        totalVol: '100000',
        soldVol: '90000',
        icon: '1'
      }, {
        rateMin: '4.01%',
        rateMax: '24.01%',
        rateMsg: '七日年化',
        prdName: '中证500指数看涨',
        tagList: ['112天', '5元起购'],
        totalVol: '100000',
        soldVol: '90000',
        icon: '1'
      }, {
        rateMin: '4.01%',
        rateMax: '24.01%',
        rateMsg: '七日年化',
        prdName: '中证500指数看涨',
        tagList: ['112天', '5元起购'],
        totalVol: '100000',
        soldVol: '90000',
        icon: '1'
      }, {
        rateMin: '4.01%',
        rateMax: '24.01%',
        rateMsg: '七日年化',
        prdName: '中证500指数看涨',
        tagList: ['112天', '5元起购'],
        totalVol: '100000',
        soldVol: '90000',
        icon: '1'
      }, {
        rateMin: '4.01%',
        rateMax: '24.01%',
        rateMsg: '七日年化',
        prdName: '中证500指数看涨',
        tagList: ['112天', '5元起购'],
        totalVol: '100000',
        soldVol: '95000',
        icon: '1'
      }]
    }
  },
  filters: {
    checkFilter (i, j) {
      console.log(i, j)
    }
  },
  methods: {
    onIndexChange (index) {
      this.dimgIndex = index
      // console.log(index)
    },
    changeShowTop () {
      this.showtop = !this.showtop
    },
    loadMore () {
      setTimeout(() => {
        this.n += 10
        console.log(this.n)
        setTimeout(() => {
          this.$refs.scroller.donePullup()
        }, 10)
        if (this.n === 30) { // unload plugin
          setTimeout(() => {
            this.$refs.scroller.disablePullup()
          }, 100)
        }
      }, 2000)
    },
    refresh () {
      this.n = 10
      this.$refs.scroller.enablePullup()
      setTimeout(() => {
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs.scroller.donePulldown()
            this.pullupEnabled && this.$refs.scroller.enablePullup()
          }, 10)
        })
      }, 2000)
    },
    showFilterClick () {
      this.showFilter = true
      this.filterLists = this.items
    },
    unshowFilterClick () {
      this.showFilter = false
      this.clearCheck()
    },
    gotoDetail  (i) {
      this.$store.commit('setStructurationInfo', this.prdInfo)
      this.$router.push({name: 'StructurationDetail', query: {num: i}})
    },
    checkedOption (i, j, option, e) {
      if (this.filterLists[i].optionLists[j].selected === 1) {
        this.filterLists[i].optionLists[j].selected = 0
      } else {
        this.filterLists[i].optionLists[j].selected = 1
      }

      let n = this.checkedOptions.indexOf(option)
      if (n !== -1) {
        this.checkedOptions.splice(n, 1)
      } else {
        this.checkedOptions.push(option)
      }
      console.log(this.checkedOptions)
    },
    sendData () {
      console.log(this.checkedOptions)
      this.showFilter = false
    },
    clearCheck () {
      let L1 = this.filterLists.length
      for (let i = 0; i < L1; i++) {
        let L2 = this.filterLists[i].optionLists.length
        for (let j = 0; j < L2; j++) {
          this.filterLists[i].optionLists[j].selected = 0
        }
      }
      this.checkedOptions = []
    },
    back () {
      this.$publicFun.goBack(this)
    }
  }
}
</script>

<style lang="less">
.structuration-plus-main{
  .dy-body{
    .swiper{
      height: 3.7rem;
    }
    .navigation-bar{
      display: flex;
      height: 0.8rem;
      background: #EDEDED;
      >div{
        padding: 0.2rem 0.3rem;
        width: 30%;
      }
      .sort{
        display: flex;
        .graph{
          position: relative;
          padding-left: 0.1rem;
          .top-triangle{
            position: relative;
            top: -0.03rem;
            border-top: 0.11rem solid transparent;
            border-right: 0.11rem solid transparent;
            border-bottom: 0.11rem solid #999999;
            border-left: 0.11rem solid transparent;
            height: 0;
            width: 0;
          }
          .top-white-triangle{
            position: absolute;
            top: 0.04rem;
            left: 0.14rem;
            border-top: 0.07rem solid transparent;
            border-right: 0.07rem solid transparent;
            border-bottom: 0.07rem solid #fff;
            border-left: 0.07rem solid transparent;
            height: 0;
            width: 0;
          }
          .bottom-triangle{
            border-top: 0.11rem solid #999999;
            border-right: 0.11rem solid transparent;
            border-bottom: 0.11rem solid transparent;
            border-left: 0.11rem solid transparent;
            height: 0;
            width: 0;
          }
          .bottom-white-triangle{
            position: absolute;
            top: 0.21rem;
            left: 0.14rem;
            border-top: 0.07rem solid #fff;
            border-right: 0.07rem solid transparent;
            border-bottom: 0.07rem solid transparent;
            border-left: 0.07rem solid transparent;
            height: 0;
            width: 0;
          }
        }
      }
      .screen-img{
        padding: 0;
        padding-top: 0.15rem;
        width: 10%;
        .img-url{
          height: 0.5rem;
          width: 0.5rem;
        }
      }
      .filter-page{
        height: 100%;
        width: 100%;
        background: #fff;
        .fliter-option{
          display: flex;
          flex-wrap: wrap;
          .types{
            width: 100%;
            padding: 0.3rem;
            font-weight: bolder;
            font-size: 0.36rem;
          }
          .option-list{
            margin-left: 0.3rem;
            padding: 0.1rem 0.3rem;
            border-radius: 0.06rem;
            border: 1px solid;
            font-size: 0.24rem;
            background: #F7F8FA;
          }
          .checked{
            background: #999999;
          }
        }
        .button-group{
          display: flex;
          margin-top: 0.5rem;
          >div{
            border-radius: 0.06rem;
            height: 0.8rem;
            width: 2.5rem;
            line-height: 0.8rem;
            font-size: 0.34rem;
            background: blue;
            color: #fff;
            text-align: center;
          }
          .cancle{
            margin: 0 0.8rem;
          }
        }
      }
    }
    .prd-list{
      .data-box{
        display: flex;
        margin-bottom: 1px;
        height: 1.5rem;
        background: #fff;
        .left-info{
          padding: 0.3rem 0.1rem 0;
          .rate{
            padding-bottom: 0.1rem;
            font-weight: bolder;
            font-size: 0.25rem;
            color: #F23E00;
          }
          .rate-msg{
            font-size: 0.26rem;
            color: #999999;
          }
        }
        .center-info{
          display: flex;
          padding-left: 0.2rem;
          width: 60%;
          flex-wrap: wrap;
          .prd-name{
            padding-top: 0.2rem;
            width: 100%;
          }
          .tag{
            padding: 0 0.1rem;
            margin-right: 0.1rem;
            border: 1px solid #999999;
            border-radius: 0.06rem;
            font-size: 0.24rem;
            height: 0.4rem;
            line-height: 0.4rem;
          }
          .red{
            color: #F23E00;
          }
        }
        .right-icon{
          .icon-img{
            height: 1rem;
            width: 1rem;
          }
        }
      }
    }
  }
}
</style>
